<template>
	<view class="container" :style="'min-height:'+height+'px'">
		<!-- hasborder -->
		<view class="common-box">
			<view class="title">卡信息</view>
			<view class="list-box hasmt">
				<view class="land-list-box">
					<view class="item flexVerticle">
						<view class="cover common-bg-img" :style="'background-image:url('+dataInfo.img+')'"></view>
						<view class="info">
							<view class="text">名称：{{dataInfo.title}}</view>
							<view class="text">价格：&yen;{{dataInfo.money / 100.0}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="common-box hasmt">
			<view class="title">收货地址</view>
			<view class="list-box hasmt" @click="slcAddress">
				<text class="iconfont icon-weizhi1"></text>
				<text>{{addressData.province + addressData.city + addressData.county}}</text>
				<image class="row flexRightbox" src="/static/icon/rightrow.png"></image>
			</view>
		</view>
		<view class="common-box hasmt">
			<view class="title">请选择支付方式</view>
			<view class="list-box hasmt" v-for="(item,index) in payList" @click="slcPay(item.id)">
				<text class="iconfont icon-weixinzhifu"></text>
				<text>{{item.name}}<text class="bright" v-if="item.isFirst">（推荐）</text></text>
				<image class="circle-img" v-if="item.id == payId" src="/static/icon/slced.png"></image>
				<view class="circle" v-else></view>
			</view>
		</view>
		<view class="common-box hasmt">
			<view class="list-box">
				<text class="bold">总额</text>
				<view class="flexRightbox">
					￥
					<!-- <image class="symbol" src="/static/icon/symbol.png"></image> -->
					<text class="price">{{dataInfo.money / 100.0}}</text>
				</view>
			</view>
		</view>
		<view class="pay-btn centerFlex" @click="gotoBuy">立即支付</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardId: '',
				height: 0,
				dataInfo: {},
				addressData: {},
				payList: [{
						name: '微信支付',
						id: 2,
						isFirst: false,
						icon: 'weixinzhifu'
					},
					/* {
						name: '余额支付',
						id: 3,
						isFirst: false,
						icon: 'yuezhifu'
					},
					{
						name: '支付宝支付',
						id: 1,
						isFirst: true,
						icon: 'zhifubaozhifu'
					} */
				],
				payId: 2
			}
		},
		onShow() {
			const that = this
		},
		onLoad(options) {
			const that = this
			this.height = uni.getSystemInfoSync().windowHeight
			that.cardId = options.cardId
			that.$api.request('card', 'getCardDO', {
				cardId: that.cardId
			}, failres => {
				that.$api.msg(failres.errmsg)
			}).then(res => {
				let data = res.data
				that.dataInfo = data
			})
			that.$api.request('address', 'getDefAddress', failres => {
				that.$api.msg(failres.errmsg)
			}).then(res => {
				that.addressData = res.data
			})
		},
		methods: {
			async loadData() {
				const that = this
			},
			videoErrorCallback: function(e) {

			},
			slcAddress() {
				uni.navigateTo({
					url: '/pages/address/list?source=1'
				})
			},
			gotoBuy() {
				const that = this
				let cardOrderDO = {
					"totalPrice": that.dataInfo.money,
					"cardId": that.dataInfo.id,
					"addressId": that.addressData.id,
					"detail": []
				}
				cardOrderDO = JSON.stringify(cardOrderDO)
				uni.showLoading({
					title: '正在加载'
				})
				that.$api.request('cardOrder', 'takeOrder', {
					channel: 'wx',
					cardOrderDO: cardOrderDO
				}, failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {
					if (res.data) {
						that.$api.cardOrderPay(res.data, function(msg) {
							uni.navigateTo({
								url: '/pages/card/list'
							})
						}, function(msg) {
							that.$api.msg('支付异常')
						})
					} else {
						that.$api.msg('支付失败')
						uni.hideLoading()
					}
				})
			},
			calcFreightPrice() {
				const that = this
			},
			slcPay(id) {
				this.payId = id
			}
		}
	}
</script>

<style lang="less" scoped>
	.flexRightbox {
		display: flex;
		align-items: center;
	}

	.container {
		padding: 24upx 30upx 150upx;
		background-color: #F9F9F9;
	}

	.common-box {
		padding: 35upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20upx;

		.title {
			color: #333333;
			font-size: 36upx;
			font-weight: bold;
		}

		.list-box {
			display: flex;
			align-items: center;
			font-size: 30upx;
			color: #333333;
			line-height: 1;

			.iconfont {
				font-size: 46upx;
				margin-right: 14upx;
			}

			.icon-weizhi1 {
				color: #ff6b8b;
			}

			.icon-weixinzhifu {
				color: #1ebc3b;
			}

			&.hasmt {
				margin-top: 45upx;
			}

			&.hasmt-md {
				margin-top: 30upx;
			}

			.row {
				width: 16upx;
				height: 25upx;

				&.haslen {
					margin-left: 8upx;
				}
			}

			.tips {
				font-size: 24upx;
				color: #666666;
			}

			.bright {
				color: #FF4E00;
			}

			.circle {
				width: 30upx;
				height: 30upx;
				border-radius: 50%;
				border: 2upx solid #BFBFBF;
				margin-left: auto;
			}

			.circle-img {
				width: 30upx;
				height: 30upx;
				margin-left: auto;
			}

			.symbol {
				width: 30upx;
				height: 30upx;
				margin-right: 15upx;
			}


			.flexRightbox {
				color: #fa436a;

				.price {
					font-size: 40upx;
					line-height: 1;
				}
			}

			.bold {
				font-weight: bold;
			}

			&.tipstext {
				font-size: 30upx;
				color: #666666;

				text:nth-child(2) {
					margin-left: 40upx;
				}
			}
		}

		&.hasborder {
			border-bottom: 1px solid #cccccc;
		}

		&.hasmt {
			margin-top: 20upx;
		}
	}

	.pay-btn {
		margin: 40upx auto 0;
		width: 80%;
		height: 88upx;
		border-radius: 44upx;
		color: #fff;
		font-size: 36upx;
		font-weight: bold;
		background: #fa436a;
	}

	.land-list-box {
		.item {
			.cover {
				width: 150upx;
				height: 150upx;
				margin-right: 20upx;
				flex-shrink: 0;
				border-radius: 20upx;
			}

			.info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 150upx;
				box-sizing: border-box;
				padding: 4upx 0;
				font-size: 28upx;

				.text {}
			}

			&:not(:last-child) {
				margin-bottom: 20upx;
			}
		}
	}
</style>
